<template>
  <div class="collect">
    <div class="top">
      <p><i class="el-icon-tickets"></i>确认订单</p>
    </div>
    <div class="conet">
      <!-- <img src="@/assets/imgs/地址.png" alt=""> -->
      <h1>商品及优惠券</h1>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <p>
            <img :src="`http://101.132.181.9:3000/${item.productImg}`">
            <span>{{item.productName}}</span>
          </p>
          <p>
            <span class="span">{{item.price}}元 x{{item.num}}</span>
            <span>{{item.price*item.num}}元</span>
          </p>
        </li>
      </ul>
      <p class="p"><span>配送方式</span><span>包邮</span></p>
      <p class="p"><span>发票</span><span>电子发票</span><span>个人</span><span>商品明细</span></p>
      <div class="div">
        <div class="uu">
          <ul>
            <li>
              <span>商品件数：</span>
              {{sum}}
            </li>
            <li>
              <span>商品总价：</span>
              {{suu}}
            </li>
            <li>
              <span>活动优惠：</span>
              -0元
            </li>
            <li>
              <span>优惠券抵扣：</span>
              -0元
            </li>
            <li>
              <span>运费：</span>
              0元
            </li>
            <li>
              <span>应付总额：</span>
              {{suu}}
            </li>
          </ul>
        </div>
        <p class="pp">
          <button @click="$router.go(-1)">返回购物车</button>
          <button @click="settlement">结算</button>
        </p>
      </div>
    </div>

  </div>
</template>

<script setup>
import { settle } from '@/utils/last.js'
import {ref,onMounted,computed } from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
const router = useRouter();
const store = useStore();
onMounted(() => {
    list.value=store.state.da
})
    const list = ref([])
    const user_id = ref(0)
    const settlement = async ()=>{
      let use = localStorage.getItem('user_id');
      user_id.value = use;
      router.push('/orders');
      let data = await settle({user_id:user_id.value,products:list.value});
      console.log(data);
    }
    /**数量 */
    const sum = computed(() => {
      let num = 0
      list.value.forEach(item => {
        num += item.num
      })
      return num
    })

    // 选中的总计
    const suu= computed(()=> {
      let num = 0
      list.value.forEach(item => {
          num += item.num * item.price
      })
      return num
    })
</script>

<style lang="scss" scoped>
.collect {
  background: #f7f7f7;
}

.top {
  width: 100%;
  height: 64px;
  background: #fff;
  border-bottom: 2px solid #ff6700;
  p {
    width: 1225px;
    margin: 0 auto;
    line-height: 64px;
    font-size: 28px;
    color: #ff6700;
    i {
      font-size: 28px;
      color: #ff6700;
      margin-right: 10px;
    }
  }
}
.conet {
  width: 1225px;
  margin: 0 auto;
  padding: 48px 30px;
  background: #fff;
  margin-top: 20px;
  h1 {
    border-bottom: 1px solid #e0e0e0;
  }
  ul {
    width: 100%;
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    li {
      width: 100%;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px 0;
      line-height: 50px;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
        margin-right: 20px;
        vertical-align: middle;
      }
      .span {
        width: 200px;
        display: inline-block;
      }
    }
  }
  .p {
    width: 100%;
    border-bottom: 1px solid #f6f6f6;
    height: 38px;
    box-sizing: border-box;
    padding: 25px 0;
    display: flex;
    align-items: center;
  
    & > span:first-child {
      width: 150px;
      display: inline-block;
      color: #000;
    }
    span {
      color: #ff6700;
      margin-left: 15px;
    }
  }
  .div {
    width: 100%;
    .uu {
      width: 100%;
      box-sizing: border-box;
      height: 300px;
      margin: 5px 0;
        border-bottom: 1px solid #f6f6f6;
      ul {
        float: right;
        width: 200px;
        li {
          width: 100%;
          height: 30px;
          margin-top: 15px;
          color: #ff6700;
          &>span:first-child{
            margin-right: 30px;
            display: inline-block;
          }
        }
      }
    }
  }

  .pp {
    float: right;
    padding: 10px 0;
    button {
      width: 158px;
      height: 38px;
      margin-left: 15px;
    }
    & > button:first-child {
      background: #fff;
      color: #babade;
      border: 1px solid #babade;
    }
    & > button:last-child {
      background: #ff6700;
      color: #fff;
    }
  }
}
</style>